<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="basicFormConfig.rules"
      :label-width="basicFormConfig.labelWidth"
    >
    <!-- 预留插槽针对特殊表单,可不配置表单配置项，但要配置按钮-->
      <slot></slot>
      <el-row>
        <el-col
          v-for="(item, index) in basicFormConfig.formConfig"
          :key="index"
          :span="item.span ? item.span : 12"
        >
          <!-- 输入框 -->
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            v-if="item.type === 'input'"
          >
            <el-input
              v-model="form[item.prop]"
              :style="{ width: item.width }"
              :placeholder="item.placeholder"
            ></el-input>
          </el-form-item>
          <!-- 数字输入框 -->
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            v-if="item.type === 'input-number'"
            :rules="item.rules"
          >
            <el-input-number
              v-model="form[item.prop]"
              :style="{ width: item.width }"
              :placeholder="item.placeholder"
            ></el-input-number>
          </el-form-item>
          <!-- 下拉款,支持多选,单选 -->
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            v-if="item.type === 'select'"
            :rules="item.rules"
          >
            <el-select
              v-model="form[item.prop]"
              filterable
              :multiple="item.multiple ? item.multiple : false"
              :placeholder="item.placeholder"
              :style="{ width: item.width }"
              @change="selectChange(form[item.prop])"
            >
              <el-option
                v-for="selectItem in item.options"
                :key="selectItem.value"
                :label="selectItem.label"
                :value="selectItem.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 时间选择 -->
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            v-if="item.type === 'timeSelect'"
            :rules="item.rules"
          >
            <el-time-picker
              is-range
              v-model="form[item.prop]"
              value-format="hh:mm:ss"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
            >
            </el-time-picker>
          </el-form-item>
          <!-- 日期、日期时间选择器 -->
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            v-if="item.type === 'dateSelect'"
            :rules="item.rules"
          >
            <el-date-picker
              v-model="form[item.prop]"
              :type="item.dateType"
              :value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd'"
              :range-separator="
                item.rangeSeparator ? item.rangeSeparator : '至'
              "
              :start-placeholder="
                item.startPlaceholder ? item.startPlaceholder : '开始日期'
              "
              :end-placeholder="
                item.endPlaceholder ? item.endPlaceholder : '结束日期'
              "
            >
            </el-date-picker>
          </el-form-item>
          <!-- SWITCH开关 -->
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            v-if="item.type === 'switch'"
            :rules="item.rules"
          >
            <el-switch v-model="form[item.prop]"></el-switch>
          </el-form-item>
          <!-- 复选框   有点问题 -->
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            v-if="item.type === 'checkbox'"
            :rules="item.rules"
          >
            <el-checkbox-group v-model="form[item.prop]">
              <el-checkbox
                v-for="(checkBoxItem, index) in item.checkboxOption"
                :key="index"
                :label="checkBoxItem.value"
                >{{ checkBoxItem.label }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
          <!-- 单选框 -->
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            v-if="item.type === 'radio'"
            :rules="item.rules"
          >
            <el-radio-group v-model="form[item.prop]">
              <el-radio
                v-for="radioItem in item.radioOption"
                :key="radioItem.value"
                :label="radioItem.value"
                >{{ radioItem.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <!-- 文本框 desc -->
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            v-if="item.type === 'textarea'"
            :rules="item.rules"
          >
            <el-input
              type="textarea"
              :autosize="{ minRows: 4 }"
              v-model="form[item.prop]"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-form-item type="flex" justify="center">
          <el-button
            v-for="(btn, index) in basicFormConfig.formButtonConfig"
            :key="index"
            :type="btn.type"
            :loading="btn.loading"
            @click="btnClick(btn.event, btn.action, btn.loading)"
            >{{ btn.label }}</el-button
          >
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
    <script>
export default {
  props: {
    basicFormConfig: {
      type: Object,
      default: () => {
        return {
          labelWidth: "120px",
          formConfig: [],
          formButtonConfig: [],
          rules: {},
          data: {},
        };
      },
    },
  },
  data() {
    return {
      form: {},
      rules: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    btnClick(event, action) {
      // console.log(loading)
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 数据提交与下一步操作需要检验表单
          if (action === "onSubmit") {
            // 数据提交
            event && event(this.form);
          } else if (action === "next") {
            // 下一步
          }
        } else {
          if (action === "exit") {
            console.log(2123);
            // 取消
            event && event();
          } else if (action === "prev") {
            // 上一步
          }
        }
      });
    },
    // 初始化
    // 解决 Cannot read properties of undefined (reading 'length')问题
    init() {
      // console.log(Object.getOwnPropertyNames(this.basicFormConfig.data).length);  // 1
      if (Object.getOwnPropertyNames(this.basicFormConfig.data).length > 1) {
        // 编辑回填数据
        this.form = this.basicFormConfig.data;
      } else {
        this.basicFormConfig.formConfig.map((item) => {
          if (item.default) {
            this.form[item.prop] = item.default ? item.default : "";
          }
        });
      }
    },
    selectChange(val) {
      // 联动情况
      this.$emit("changeSelectValue", val);
    },
  },
};
</script>